<template>
	<view>
		<view :class="{'item':!on,'item-on':on,'u-border-bottom':on,'u-flex':on,'u-row-left':on}" class="list"
			@tap="goProduct(info.skuId)">
			<view>
				<image :src="info.image" :class="{'image-on':on,'image':!on}" />
			</view>
			<view :class="{'info-on':on,'info':!on}">
				<view class="u-line-2 text2">{{info.skuName}}</view>
				<view class="u-flex u-row-between" style="line-height: 40rpx;margin: 10rpx 0;">
					<view class="u-flex u-row-left coupon" v-if="info.couponPrice>0">
						<view style="background-color: #FFF;width: 10rpx;height: 10rpx;border-radius: 0 20rpx 20rpx 0;">
						</view>
						<view class="label">券</view>
						<view>
							<u-line direction="col" length="40rpx" dashed />
						</view>
						<view class="label">{{info.couponPrice}}</view>
						<view
							style="background-color: #FFF;width: 10rpx;height: 10rpx;border-radius:  20rpx 0 0 20rpx;">
						</view>
					</view>

					<view class="u-flex u-row-left" style="font-size: 22rpx;">

						<!-- <view class="text3">奖励</view>
						<view class="text4">￥{{info.couponCommission}}</view> -->
					</view>
				</view>
				<view class="u-flex u-row-between">
					<view class="price">￥{{info.priceInfo.lowestCouponPrice}}</view>
					<view class="text5" v-if="!on">已售{{info.inOrderCount30Days}}单</view>
					<view v-else class="u-flex u-row-left">
						<view class="text7">{{info.comments}}条评论</view>
						<view class="text6">
							{{info.goodCommentsShare}}%好评
						</view>
					</view>
				</view>
				<view v-if="on" class="text8">
					京东价{{info.priceInfo.price}}
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import priceStyle from '@/components/priceStyle.vue'
	import {
		goNav
	} from '@/lib/Comment.js'
	export default {
		components: {
			priceStyle
		},
		props: {
			info: {
				type: Object,
				default: () => {
					return {}
				}
			},
			on: {
				type: Boolean,
				default: false
			}
		},
		data() {
			return {}
		},
		methods: {
			goProduct(id) {
				goNav("/pages/sub/jd/detail?skuId=" + id)
			}
		}
	}
</script>

<style scoped lang="scss">
	.item-on {
		padding: 20rpx 0;
		margin-bottom: 10rpx;
		align-items: flex-start;

	}

	.item {
		border-radius: 15rpx;
	}

	.list {
		font-size: 30rpx;
		color: #3b3b3b;
		background-color: #FFFFFF;

	}

	.image {
		border-radius: 15rpx 15rpx 0 0;
		width: 345rpx;
		height: 345rpx;
	}

	.image-on {
		width: 100%;
		width: 200rpx;
		height: 200rpx;
	}

	.info-on {
		padding: 0 20rpx;
	}

	.info {
		padding: 20rpx;

		line-height: 50rpx;
	}

	.text2 {
		font-size: 28rpx;
		line-height: 40rpx;
	}

	.coupon {

		font-size: 22rpx;
		color: #FFFFFF;
		background-color: #b286ad;
	}

	.label {
		padding: 0 10rpx;
	}

	.text3 {
		background-color: #000;
		color: #FFF;
		padding: 0 10rpx;
	}

	.text4 {
		background-color: #e5e3ee;
		color: #000;
		padding: 0 10rpx;
	}

	.price {
		font-weight: bold;
		color: $base-color;
	}

	.text5 {
		font-size: 26rpx;
	}

	.text6 {
		font-size: 20rpx;
		color: #3b3b3b;
	}

	.text7 {
		font-size: 20rpx;
		color: #3b3b3b;
		margin-right: 15rpx;
	}

	.text8 {
		font-size: 24rpx;
		color: #9f9f9f;
		text-decoration: line-through;
	}
</style>
